<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">通用大数据框架智能计算引擎优化仿真平台</el-breadcrumb-item>
      <el-breadcrumb-item>Docker</el-breadcrumb-item>
      <el-breadcrumb-item>容器集群管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="keywords"  class="input-with-select" clearable="getContainerClusterList()">
            <el-button slot="append" icon="el-icon-search" @click="getContainerClusterList()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="createdockersVisible = true">创建docker集群</el-button>
        </el-col>
      </el-row>
      <el-table
          :data = "ContainerClusterList.slice((queryInfo.pagenum-1)*queryInfo.pagesize,queryInfo.pagenum*queryInfo.pagesize)"
          border
          style="width: 100%">
        <el-table-column
            prop="container_name"
            label="集群名称"
            width="200">
        </el-table-column>
        <el-table-column
            prop="container_type"
            label="容器类型"
            width="200">
        </el-table-column>
        <el-table-column
            prop="container_number"
            label="容器数量"
            width="160">
        </el-table-column>
        <el-table-column
            prop="container_cpu"
            label="CPU数"
            width="160">
        </el-table-column>
        <el-table-column
            prop="container_mem"
            label="内存"
            width="160">
        </el-table-column>

        <el-table-column
            prop="container_namespace"
            label="命名空间"
            width="180">
        </el-table-column>
        <el-table-column
            prop="operate"
            label="操作"
            width="200">
          <template v-slot="scope">
<!--            <el-tooltip class="item" effect="dark" content="编辑集群" placement="top">-->
<!--              <el-button type="primary" icon="el-icon-edit"  @click="editContainerCluster(scope.row)"></el-button>-->
<!--            </el-tooltip>-->
            <el-tooltip class="item" effect="dark" content="删除集群" placement="top">
              <el-button type="danger" icon="el-icon-delete" @click="removeContainerCluster(scope.$index)" ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[10,20,30]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="ContainerClusterList.length">

      </el-pagination>
    </el-card>
    <el-dialog
        title="编辑"
        :visible.sync="editeditContainerClusterVisble"
        width="30%"
        :before-close="handleClose"

    >
      <el-form :model="editeditContainerClusterParams" :rules="editContainerClusterFormRul" ref="editUserFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="方案ID" prop="managementID" >
          <el-input v-model="editeditContainerClusterParams.ContainerClusterId"  ></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
        title="创建docker集群"
        :visible.sync="createdockersVisible"
        width="30%"
    >
      <el-form>
        <el-form-item label="集群名称">
          <el-input v-model="createdockersForm.docker_name"></el-input>
        </el-form-item>
        <el-form-item label="容器类型">
          <el-input v-model="createdockersForm.docker_image"></el-input>
        </el-form-item>
        <el-form-item label="容器数量">
          <el-input v-model="createdockersForm.docker_nums"></el-input>
        </el-form-item>
        <el-form-item label="CPU核数">
          <el-input v-model="createdockersForm.docker_cpu"></el-input>
        </el-form-item>
        <el-form-item label="内存">
          <el-input v-model="createdockersForm.docker_ram"></el-input>
        </el-form-item>

        <el-form-item label="命名空间">
          <el-input v-model="createdockersForm.namespace_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="add_containerCluster">确 定</el-button>
          <el-button @click="createdockersVisible= false">取 消</el-button>
          </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  add_containerCluster,
  find_all_containerCluster,
  find_containerCluster,
  del_containerCluster,
} from "@/api/file";
export default {
  data(){
    return{
      queryInfo:{
        //查询参数
        query:'',
        pagenum:1,
        pagesize:10,
      },
      keywords:'',
      createdockersForm:{
        namespace_name:'bigdata',
        docker_image:'nginx',
        docker_nums:'2',
        docker_cpu:'100',
        docker_ram:'100',
        docker_name:'nginx-gzh'
      },
      namespace: {
        container_namespace:'bigdata',
      },
      createdockersFormRul:{},
      editContainerClusterFormRul:{},
      ContainerClusterList:[],
      testdata:{},
      createdockersVisible: false,
      remove_container:{
        container_name:'',  // 处理器名字
        container_namespace:'bigdata',  //容器命名空间
      },
      test:[
        {
          ContainerClusterId:'01',
          ContainerClusterName :'1',
          ContainerType :'test01',
          ContainerNum:'2',
          CPUNum :'8',
          Memory :'1024',
          NameSpace:''
        },
        {
          ContainerClusterId:'02',
          ContainerClusterName :'2',
          ContainerType :'test01',
          ContainerNum:'3',
          CPUNum :'3',
          Memory :'1024',
          NameSpace:''
        }

      ],
      editeditContainerClusterVisble: false,
      editeditContainerClusterParams:{},
    }
  },
  methods:{
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {});
    },
    SizeChange(newsize){
      this.queryInfo.pagesize = newsize
    },
    CurrentChange(newnumber){
      this.queryInfo.pagenum = newnumber
    },
    removeContainerCluster(index){
      // 提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。
      this.$confirm('此操作将永久删除'+index.container_name+', 是否继续?', '删除文件', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.remove_container.container_name = this.ContainerClusterList[index].container_name
        del_containerCluster(this.remove_container)

        this.ContainerClusterList.splice(index,1)  // 在前端页面删除
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    getContainerClusterList() {
      let data = {
        namespace: this.namespace.container_namespace,
        keywords: this.keywords
      }
      find_all_containerCluster(data).then(res=>{
        this.ContainerClusterList = res
      })

    },
    editContainerCluster(row){
      this.editeditContainerClusterParams = row
      this.editeditContainerClusterVisble = true
    },
    closecreatedockersDialog(){
      this.$refs.createdockersFormRef.resetFields()
    },
    // createdockers(){
    //   this.$http.get('/').then(res=>{
    //     if(res.data.meta.status !== 200)
    //         // return this.$message.error('获取信息失败')
    //
    //         //将这里的files等替换成数据库里的
    //       this.docker=this.dockertest
    //
    //
    //   })
    //
    //   this.createdockersVisible = true
    // },
    // createdockerssubmit(){
    //   this.$refs.createdockersFormRef.validate(valid=>{
    //     if(!valid) return alert('请输入正确信息')
    //   })
    //   this.$http.post('/',this.createdockersForm).then(res=>{
    //     console.log(res)
    //
    //   })
    //   this.createdockersVisible = false
    //   this.getContainerClusterList()
    // },
    add_containerCluster(){
      add_containerCluster(this. createdockersForm).then(res=>{
      //   if(res.toString() === "Created successfully"){
      //     this.success_tip()
      //     this.ContainerClusterList.push(this. createdockersForm)
      //   }else{
      //     this.fail_tip()
      //   }
      //   // 逻辑处理
      // }).catch(err=>{
      //   console.log(err)
      //   this.$message.error(err);
      // })
        console.log(res)
        this.$message.success('创建成功')
        this.getContainerClusterList()
        // 逻辑处理
      }).catch(err=>{
        console.log(err)
        this.$message.error(err);
      })
    },
    async selectoptimizeSchemeList() {
      if (this.keywords!== '') {
        let form = null
        form = this.keywords
        const params = form
        const res = await find_containerCluster(params)
        if (res.data.meta.status === 200) this.success_tip()
        else {
          this.fail_tip()
        }
        this.ContainerClusterList = res.data
        return true
      }
      return false
    },
    success_tip() {
      this.$message({
        message: '创建成功',
        type: 'success'
      });
    },
    fail_tip(){
      this.$message({
        message: '创建失败',
        type: 'fail'
      });
    },

  },

  created() {
    if (this.selectoptimizeSchemeList() === true)
      this.selectoptimizeSchemeList()
    else {
      this.getContainerClusterList()
    }
  }
}

</script>
<style>

</style>
